<template>
  <div>
    <div class="left-line" @mouseover="showBack" @mousemove="showBack" @mouseout="hiddenBack"></div>
    <div
      class="home-back"
      v-if="canBack"
      @mouseover="showBack"
      @mousemove="showBack"
      @mouseout="hiddenBack"
    >
      <!-- <img src="~img/images/back_button.png" alt="" @click="goBack" /> -->
    </div>
  </div>
</template>

<script>
export default {
  name: 'back',
  data() {
    return {
      canBack: false
    };
  },
  activated() {
    this.canBack = false;
  },
  methods: {
    showBack() {
      this.canBack = true;
    },
    hiddenBack() {
      this.canBack = false;
    },
    goBack() {
      this.$emit('goBack');
    }
  }
};
</script>

<style scoped lang="scss">
.left-line {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 6px;
  z-index: 101;
}
.home-back {
  position: fixed;
  z-index: 100;
  left: 0px;
  top: 50%;
  cursor: pointer;
  transform: translateY(-50%);
  img {
    width: 83px;
    height: 130px;
  }
}
</style>
